<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title></title>
		<!--<link href="cubt.css" rel="stylesheet" type="text/css">-->
		<style type="text/css">
			/*PC*/
			/*html,body{height:480px; width:800px; overflow:hidden; margin:0; padding:0;}
			.cube {width:480px; height:800px; color:#fff; background-color:#369; text-align:center; -webkit-perspective: 1000px;perspective: 1000px;}*/
			/*Phone*/
			html,body{height:100%; width:100%; overflow:hidden; margin:0; padding:0;}
			.cube {width:100%; height:100%; color:#fff; background-color:#369; text-align:center; -webkit-perspective: 500px;perspective: 500px;}
			.cube div{
				width: 100%;
				height: 100%;
				position: fixed;
				left:0;
				top:0;
				background-size: 100%;
				-webkit-background-size: 100%;
				transform-style: preserve-3d;
				transform-origin: bottom right;
				-webkit-transform-style: preserve-3d;
				-webkit-transform-origin: bottom right;
			}
			.cube div:nth-child(1){
				/*background: url(01.png) no-repeat;*/
				background-color:transparent;
				transform: rotateY(0deg) translateX(0px);
				-webkit-transform: rotateY(0deg) /*translateX(0px)*/;
			}
			.cube div:nth-child(2){
				/*background: url(2.jpg) no-repeat;*/
				background-color:transparent;
				transform: rotateY(-15deg) translateX(0px);
				-webkit-transform: rotateY(-15deg) translateX(0px);

				/*transform-origin: bottom right;*/

			}
			.cube div:nth-child(3){
				background-color:transparent;
				transform:rotateY(-36deg) translateX(0px);
				-webkit-transform:rotateY(-36deg) translateX(0px);

			}
			.cube div:nth-child(4){
				background-color:transparent;

				transform:rotateY(-54deg) translateX(0px);
				-webkit-transform:rotateY(-54deg) translateX(0px);

			}
			.cube div:nth-child(5){
				background-color:transparent;
			-webkit-transform:rotateY(-72deg) translateX(0px);

				transform:rotateY(-72deg) translateX(0px);

			}
			.cube div:nth-child(6){
				background-color:transparent;
				-webkit-transform:rotateY(-90deg) translateX(0px);

				transform:rotateY(-90deg) translateX(0px);
			}
			.box div:nth-child(7){
				background-color:transparent;
				-webkit-transform:rotateY(-108deg) translateX(0px);

				transform:rotateY(-108deg) translateX(0px);
			}
			.cube div:nth-child(8){
				background-color:transparent;
				-webkit-transform:rotateY(-126deg) translateX(0px);

				transform:rotateY(-126deg) translateX(0px);
			}
			.cube div:nth-child(9){
				background-color:transparent;
				-webkit-transform:rotateY(-144deg) translateX(0px);

				transform:rotateY(-144deg) translateX(0px);
			}
			.cube div:nth-child(10){
				background-color:transparent;
				transform:rotateY(-162deg) translateX(0px);

				-webkit-transform:rotateY(-162deg) translateX(0px);
			}
		</style>
	</head>
	<body>
		<div id="images" class="cube">
			<!--<div><img src="01.png" width="100%"></div>
			<div><img src="01.png" width="100%"></div>
			<div><img src="01.png" width="100%"></div>
			<div><img src="01.png" width="100%"></div>
			<div><img src="01.png" width="100%"></div>
			<div><img src="01.png" width="100%"></div>
			<div><img src="01.png" width="100%"></div>
			<div><img src="01.png" width="100%"></div>
			<div><img src="01.png" width="100%"></div>
			<div><img src="01.png" width="100%"></div>-->

		</div>
		<script type="text/javascript">
			var box = document.getElementById("images");
			var box_div= box.getElementsByTagName("div");
			var deg_value = 0;
			//var time1 = setInterval("rotateImage()",100);
			var pre_x = 0;
			var pre_y = 0;
			var move_direct = 0; // 0 - to right, 1 to left
			var rotateDeg = 2;
			var image_array = new Array("01.png","01.png","01.png","01.png","01.png","01.png","01.png","01.png","01.png","01.png","01.png",
					"01.png","01.png","01.png","01.png","01.png","01.png","01.png","01.png","01.png");
			//removeNode(0);
			//addNode(0);
			initAllDiv();
			rotateImage();
			box.onclick = function(){
				if(time1){
					clearInterval(time1);
					time1 = null;
				}else{
					time1 = setInterval("rotateImages()",100);
				}
			};

			/*box.onmousemove = function(ev){
				var oEvent = ev || event;
				var pos = GetMouse(oEvent);
				if(pre_x == 0 && pre_y==0){
					pre_x = pos.x;
					pre_y = pos.y;
				}else{
					//console.log("zlwu add, pre_x")
					if((pre_x < pos.x) && (pos.x - pre_x)>50){
						//move to right
						if(time1){
							if(1 == move_direct){
								clearInterval(time1);
								time1 = null;
								//start new timer to move to right
								rotateDeg = 2;
								time1 = setInterval("rotateImages()",100);
								move_direct=0;
							}else{
								//do nothing
							}
						}else{
							//pause, start move
							rotateDeg = 2;
							time1 = setInterval("rotateImages()",100);
						}

					}else if((pre_x > pos.x) && (pre_x - pos.x)>50){
						//move to left
						if(time1){
							if( 0 == move_direct){
								clearInterval(time1);
								time1= null;
								//start new time to move to left
								rotateDeg = -2;
								time1 = setInterval("rotateImages()",100);
								move_direct=1;
							}else{
								//do nothing
							}
						}else{
							//pause, start move to left
							rotateDeg = -2;
							time1 = setInterval("rotateImages()",100);
						}
					}
				}
			}*/

			function GetMouse(ev) {     //获取鼠标移动的坐标
				var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
				var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
				return { x: ev.clientX + scrollLeft, y: ev.clientY + scrollTop }
			}
			function rotateImages(){
				console.log("zlwu add , deg_value="+deg_value+"rotateDeg = "+rotateDeg);
				for (var i = 0; i < box_div.length; i++) {
					var rotate_value = deg_value + (i*-15);
					/*if(rotate_value >= 90)
					 {
					 rotate_value = 90;
					 }*/
					var deg = "rotateY("+rotate_value+"deg)";
					box_div[i].style.transition = "500ms";
					//box_div[i].style.transform=deg;//"rotateY("+i+"deg)";
					box_div[i].style.webkitTransform=deg;
				}
				deg_value += rotateDeg;
				if(deg_value>=45){
					//deg_value = 0;
					//box_div[0].style.transition = "1ms";
					//box_div[0].style.webkitTransform="rotateY(0deg)";
					//clearInterval(time1);
					//removeNode(0);
					addNode(0);
				}
			}
			function rotateImage(){
				console.log("zlwu in rotateImages");
				for (var i = 0; i < box_div.length; i++) {
					var rotate_value = getTranslateY(box_div[i]);
					var int_rotate = 0;
					if(null != rotate_value){
						int_rotate = rotate_value.replace(/[^0-9+-]/ig,"");
					}
					var rotateY_deg = parseInt(int_rotate)+90;
					if(rotateY_deg>90){
					 	removeNode(box_div[i]);
					 }else{
						var deg = "rotateY("+rotateY_deg+"deg)";
						box_div[i].style.webkitTransition = "-webkit-transform 10000ms";
						box_div[i].style.webkitTransform=deg;
					}
				}

			}

			box_div[0].addEventListener("webkitTransitionEnd",function(){
				console.log("zlwu add for transition end");
			});

			function addNode(){
				var oDiv = document.createElement('div');
				var box = document.getElementById("images");
				box.appendChild(oDiv);
				var image = document.createElement('img');
				image.src = "01.png";
				image.id = "p0";
				image.style.width = document.documentElement.clientWidth + 'px';
				oDiv.appendChild(image);
				oDiv.style.webkitTransform="rotateY(-45deg)";
				//var addNodeDeg=getTranslateY(oDiv);
				//console.log("the add nodeDeg is"+addNodeDeg);
			}

			function addNodeWithDeg(deg){
				var oDiv = document.createElement('div');
				var box = document.getElementById("images");
				box.appendChild(oDiv);
				var image = document.createElement('img');
				image.src = "01.png";
				image.id = "p0";
				image.style.width = document.documentElement.clientWidth + 'px';
				oDiv.appendChild(image);
				oDiv.style.webkitTransform="rotateY("+deg+"deg)";
				//var addNodeDeg=getTranslateY(oDiv);
				//console.log("the add nodeDeg is"+addNodeDeg);
			}


			function removeNode(node){
				node.parentNode.removeChild(node);
			}

			//获取node translate Y
			function getTranslateY(node){
				var regRule = /(Y|\dd)?\(\s*(\w+\s*,)?\s*([^,]+)(\s*,[^)]+)?\s*\)/;
				var regRule2 = /matrix\(.*,\s*(\w+)\s*\)/;
				var transform = node.style.webkitTransform;
				var reg;
				if(!transform){
					return null;
				}
				reg = regRule.exec(transform);
				if(null === reg){
					reg = regRule2.exec(transform);
					return reg ? reg[1] : null;
				}
				return reg[3];
			}

			function initAllDiv(){
				/*init 10 divs*/
				var rotate = 0;

				for(i = 0; i <= 9; i++){
					rotate = -18*i;
					addNodeWithDeg(rotate);
				}
				//addNodeWithDeg(0);
				//addNodeWithDeg(-110);
			}

		</script>
	</body>
</html>
